<template>
    <div class="table-w">
        <div class="title-div">
            <span>裁剪任务</span>
        </div>
        <div>
            <!-- <el-carousel :interval="6000" :autoplay="true" indicator-position="outside" height="870px" :arrow="always">
                <el-carousel-item v-for="item in 2" :key="item">
                    <div v-show="item===1"> -->
                        <el-table
                        :data="taskList"
                        :row-style="tableRowStyle"
                        :header-cell-style="tableHeaderColor"
                        highlight-current-row
                        style="width: 100%;font-size:26px;"
                        height="880px"
                        >
                        <el-table-column prop="TaskRegisterID" label="裁单号" width="160" align="center"></el-table-column>
                        <el-table-column prop="CuttingOrgName" label="厂别" width="120" align="center"></el-table-column>
                        <el-table-column prop="ProductLineName" label="生产线" width="120" align="center"></el-table-column>
                        <el-table-column prop="TaskLineName" label="生产监区" width="120" align="center"></el-table-column>
                        <el-table-column prop="CustomerName" label="厂家" width="220" align="center"></el-table-column>
                        <el-table-column prop="StyleName" label="款式" width="160" align="center"></el-table-column>
                        <el-table-column prop="CuttingCount" label="要求套数" width="120" align="center"></el-table-column>
                        <el-table-column prop="CompletCount" label="已完成" width="120" align="center"></el-table-column>
                        <el-table-column prop="TaskDetail" label="配比要求" align="center"></el-table-column>
                        <el-table-column prop="CuttingDate" label="裁剪日期" width="100" align="center">
                            <template
                            slot-scope="scope"
                            >{{$moment(scope.row.CuttingDate).format('YYYY-MM-DD')}}</template>
                        </el-table-column>
                        <el-table-column prop="StatusName" label="状态" width="120" align="center">
                            <template slot-scope="scope">
                            <div
                                style="color:#409EFF"
                                v-if="scope.row.Status==164001"
                            >{{scope.row.StatusName}}</div>
                            <div style="color:#fff" v-if="scope.row.Status==164002">{{scope.row.StatusName}}</div>
                            <div style="color:#999" v-if="scope.row.Status==164003">{{scope.row.StatusName}}</div>
                            </template>
                        </el-table-column>
                        </el-table>
                    <!-- </div>
                    <div v-show="item===2">2</div>
                </el-carousel-item>
            </el-carousel> -->
        </div>
    </div>
</template>
<script>
import {getTailoringTaskList} from '@/api/common' // 接口
export default {
  name: 'cutinfo',
  data () {
    return {
      taskList: [],
      gettaskInfo: null
    }
  },
  methods: {
      // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
      // 任务单-根据不同裁裁剪任务列表
    getTailoringTaskList () {
      let vm = this
      let params = new FormData()
      params.append('OrgID', vm.getLocalStorage('OrgID'))
      params.append('CuttingBedFlnkID', '0')
      getTailoringTaskList(params).then((response) => {
        if (response.data.result) {
          vm.taskList = response.data.data
        }
      })
    }
  },
  mounted () {
    let vm = this
    vm.getTailoringTaskList()
    if (vm.gettaskInfo === null) {
      vm.gettaskInfo = setInterval(function () {
        vm.getTailoringTaskList()
      }, 10 * 1000)
    }
  },
  beforeDestroy: function () {
    let vm = this
    if (vm.gettaskInfo !== null) {
      clearInterval(vm.gettaskInfo)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/css/cutinfo/index.scss";
</style>
<style lang="scss">
.el-carousel__arrow{
    width: 1.5rem;
    height: 1.5rem;
}
.el-carousel__indicators--outside{
    padding-top: 10px;
}
</style>